<template>
  <div class="app-container">
    <EtopSearch
      :options="options"
      @getData="searchFn"
      @resettingFn="resettingFn"
    />
    <el-button type="primary" @click="openEditFn()" size="medium"
      >新增</el-button
    >
    <ETable
      style="margin-top: 20px"
      ref="ETable"
      :height="260"
      :titleObj="titleObj"
      @sortFun="sortFun"
      operateWidth="200"
      :reqObj="setOf"
      :reqFn="getSysMember"
    >
      <template v-slot="{ scope }">
        <el-button
          @click="openDlFn(scope, 'passwordDl')"
          type="text"
          size="small"
          >重置密码</el-button
        >
        <el-divider direction="vertical"></el-divider>
        <el-button @click="openEditFn(scope)" type="text" size="small"
          >修改</el-button
        >
        <el-divider direction="vertical"></el-divider>
        <el-button @click="deactivateClick(scope)" type="text" size="small">
          <div v-if="scope.IS_ENABLE == 1">停用</div>
          <div v-else>启用</div>
        </el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button @click="openDlFn(scope, 'roleDl')" type="text" size="small"
          >角色</el-button
        >
      </template>
    </ETable>
    <edit ref="edit" @callBackFn="getData" />
    <roleDl ref="roleDl" />
    <passwordDl ref="passwordDl" />
  </div>
</template>

<script>
let id = 1000;
import ETable from "@/components/ETable";
import edit from "./components/edit.vue";
import roleDl from "./components/roleDl.vue";
import EtopSearch from "@/components/EtopSearch";
import passwordDl from "./components/passwordDl.vue";
import { getSysMember, postSysMemberAble } from "@/api/management/user";
import Eselect from "@/components/Eselect";
export default {
  name: "user",
  components: {
    edit,
    roleDl,
    passwordDl,
    ETable,
    Eselect,
    EtopSearch,
  },
  data() {
    return {
      titleObj: [
        {
          prop: "MEMBER_USERNAME",
          label: "用户名",
          sortable: "custom",
          minWidth: "94px",
        },
        { prop: "MEMBER_NICKNAME", label: "昵称", minWidth: "100 " },
        {
          prop: "ORG_NAME",
          label: "所属机构",
          sortable: "custom",
          minWidth: "110px",
        },
        {
          prop: "DEPART_NAME",
          label: "所属部门",
          sortable: "custom",
          width: "110px",
        },
        {
          prop: "MEMBER_PHONE",
          label: "用户电话",
          width: "110px",
          sortable: "custom",
        },
        {
          prop: "LOGIN_NUM",
          label: "登录次数",
          width: "110px",
          sortable: "custom",
        },
        {
          prop: "LAST_LOGIN_TIME",
          label: "最近登录时间",
          width: "160px",
          sortable: "custom",
        },
        {
          prop: "CR_TIME",
          label: "创建时间",
          width: "160px",
          sortable: "custom",
        },
        {
          prop: "IS_ENABLE",
          label: "状态",
          width: "80px",
          sortable: "custom",
          type: "color",
          formatter: (scope) => this.fmIsEnable(scope),
        },
      ],
      setOf: {
        memberUsername: "",
        isEnable: "",
        sortStr: "sortList[0].sortName=CR_TIME&sortList[0].sortType=desc",
      },
      options: [
        {
          type: "input",
          name: "用户名：",
          key: "memberUsername",
          value: "",
        },
        {
          type: "select",
          name: "状态：",
          key: "isEnable",
          value: "",
          options: [
            {
              value: "0",
              label: "停用",
            },
            {
              value: "1",
              label: "启用",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getSysMember,
    async getData() {
      this.$refs.ETable.getData();
    },
    searchFn(val) {
      // 如果在第四页搜索会把页码4传过去没数据，所以搜索变成1
      this.$refs.ETable.pageInfo.page = 1;
      // 保存传递出来的搜索数据，用于表格请求
      this.setOf.memberUsername = val.memberUsername;
      this.setOf.isEnable = val.isEnable;
      this.getData();
    },
    async sortFun(str) {
      this.setOf.sortStr = str;
      this.getData();
    },
    resettingFn() {
      // 重置搜索数据以及搜索框的options数据
      this.options.forEach((element) => (element.value = ""));
      this.setOf.memberUsername = "";
      this.setOf.isEnable = "";
    },
    openEditFn(scope) {
      this.$refs.edit.open(scope);
    },

    async deactivateClick(row) {
      console.log(row);
      let t = await this.$confirm(
        `此操作将永久${row.IS_ENABLE == "启用" ? "停用" : "启用"}, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      );
      if (t) {
        let res = await postSysMemberAble(row.ID);
        if (res.code == 0 && res.data.bcode == 0) {
          this.$message.success("操作成功");
          this.getData();
        }
      }
    },

    // 打开弹框
    openDlFn(scope, val) {
      this.$refs[val].open(scope);
    },

    fmIsEnable(scope) {
      return (
        <span style={{ color: scope.IS_ENABLE == 1 ? "" : "red" }}>
          {scope.IS_ENABLE == 1 ? "启用" : "停用"}
        </span>
      );
    },
  },
};
</script>

<style scoped lang="scss"></style>
